<template>
  <div class="box">
    <!-- 顶部文字 -->
    <div class="app-container">
      <span>房产管理</span>
      <p>用于展示房产信息，以户为单位</p>
    </div>
    <!-- 头部输入框 -->
    <el-card class="box-but">
      <el-form class="demo-form-inline" :inline="true">
        <el-form-item label="小区名称">
          <el-select v-model="data.community_code" placeholder="请选择" @change="communityName">
            <el-option v-for="item in getSelectHome" :key="item.id" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="栋数">
          <el-select v-model="data.building_code" placeholder="请选择">
            <el-option v-for="item in ridgepole" :key="item.id" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="单元数">
          <el-input v-model="data.unit" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="楼层">
          <el-input v-model="data.floor" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="房产名称">
          <el-input v-model="data.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item v-if="state" label="户主姓名">
          <el-input v-model="data.owner_name" placeholder="请输入" />
        </el-form-item>
        <el-form-item v-if="state" label="联系方式">
          <el-input v-model="data.owner_tel" placeholder="请输入" />
        </el-form-item>
        <el-form-item v-if="state" label="创建时间">
          <el-date-picker
            v-model="data.enter_time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item class="but">
          <el-button type="primary" size="small" @click="serach">查询</el-button>
          <el-button size="small" @click="replacement">重置</el-button>
        </el-form-item>
        <el-form-item class="unfold">
          <el-button type="text" @click="ChangeState">{{ state?'收起':'展开' }}<i :class="state?'el-icon-arrow-up':'el-icon-arrow-down'" /></el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 数据主体 -->
    <el-card class="box-card">
      <el-button type="primary" class="but-flet" size="small" @click="OpenDrawe">新增小区</el-button>
      <el-table style="width: 100%" :data="list">
        <el-table-column prop="community.name" label="小区名称" width="90px" />
        <el-table-column prop="building.name" label="栋数" />
        <el-table-column prop="unit" label="单元数" />
        <el-table-column prop="floor" label="楼层" />
        <el-table-column prop="code" label="房产编号" width="200px" />
        <el-table-column prop="name" label="房产名称" width="100px" />
        <el-table-column prop="owner_name" label="房主姓名" />
        <el-table-column prop="owner_tel" label="联系方式" width="90px" />
        <el-table-column prop="rooms" label="房间数" />
        <el-table-column prop="desc" label="描述" />
        <el-table-column prop="enter_time" label="入住时间" width="100px">
          <!-- 格式化时间 -->
          <template #default="{ row }">
            {{ entryTime(row.enter_time) }}
          </template>
        </el-table-column>
        <el-table-column prop="date" label="操作" width="120px">
          <template #default="{ row }">
            <el-button type="text" @click="OpenDrawe(row.id)">编辑</el-button>
            <el-button type="text" @click.native="buildingDel(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :page-sizes="[2, 5, 10, 20]"
        :page-size="data.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 底部文字 -->
    <div class="bottomtxt">
      <p>Ant Design Pro黑马前端合肥前端欢迎您</p>
      <p>© 2023 悦兴物业集团</p>
    </div>
    <houseDrawer ref="houseDrawer" :housre-dialog.sync="housreDialog" :get-select-home.sync="getSelectHome" />
  </div>
</template>

<script>
import { housePropertyListAPI, showBuildingApi, BuildingDelApi } from '@/api/houseProperty'
import { getSelectHomeApi } from '@/api/LouDong'
import houseDrawer from './community/houseDrawer.vue'
import dayjs from 'dayjs'
// import { BBSDataAPI } from '@/api/BBSManage'
export default {
  name: 'One',
  components: {
    houseDrawer
  },
  data() {
    return {
      // 获取数据携带的参数
      data: {
        current: 1,
        pageSize: 10,
        id: '',
        // 小区名称{name}
        community: '',
        // 栋数{name}
        building: '',
        // 单元数
        unit: '',
        // 楼层
        floor: '',
        // 房产编号
        code: '',
        // 房产名称
        name: '',
        // 户主姓名
        owner_name: '',
        // 联系方式
        owner_tel: '',
        // 房间数
        rooms: '',
        // 描述
        desc: '',
        // 入住时间
        enter_time: null,
        community_code: '',
        building_code: ''
      },
      // 抽屉开关
      housreDialog: false,
      // 获取到的数据
      list: [],
      // 总数据个数
      total: 0,
      // 全部小区
      getSelectHome: [],
      // 小区的栋数,
      ridgepole: [],
      // 搜索框状态
      state: false
    }
  },
  created() {
    this.housePropertyList()
    this.getSelectHomes()
  },
  methods: {
    // // 格式创建时间  需要 npm i dayjs  下载插件
    entryTime(value) {
      // 使用插件格式化事件格式
      return value ? dayjs(value).format('YYYY/MM/DD hh:mm:ss') : ''
    },
    // 获取页面数据
    async housePropertyList() {
      const { data } = await housePropertyListAPI(this.data)
      this.list = data.rows
      this.total = data.count
      // console.log(data)
    },
    // 获取所有小区名称
    async getSelectHomes() {
      this.ridgepole = []
      const res = await getSelectHomeApi(this.datas)
      this.getSelectHome = res.data
      // console.log(res.data)
    },
    // 获取栋数
    async communityName() {
      const { data: { rows }} = await showBuildingApi(this.data)
      this.ridgepole = rows
      this.data.building_code = ''
      // console.log(this.data)
      // console.log(rows)
    },
    // 查询
    async serach() {
      if (this.data.enter_time) {
        this.data.enter_time = this.data.enter_time.map(item => {
          return +new Date(item)
        }).join(',')
      }
      const { data: res } = await housePropertyListAPI(this.data)
      this.list = res.rows
      this.total = res.count
    },
    // 打开抽屉
    OpenDrawe(id) {
      this.housreDialog = true
      this.$refs.houseDrawer.communityParticulars(id)
    },
    // 重置
    replacement() {
      this.data = {
        current: '1',
        pageSize: '10',
        id: '',
        // 小区名称{name}
        community: '',
        // 栋数{name}
        building: '',
        // 单元数
        unit: '',
        // 楼层
        floor: '',
        // 房产编号
        code: '',
        // 房产名称
        name: '',
        // 户主姓名
        owner_name: '',
        // 联系方式
        owner_tel: '',
        // 房间数
        rooms: '',
        // 描述
        desc: '',
        // 入住时间
        enter_time: '',
        community_code: '',
        building_code: ''
      }
      this.ridgepole = []
      this.housePropertyList()
    },
    // 删除数据
    buildingDel(id) {
      this.$confirm('确认删除?', '温馨提示').then(async() => {
        await BuildingDelApi(id)
        this.$message.success('删除成功')
        this.housePropertyList()
      })
    },
    // 搜索框显示隐藏状态
    ChangeState() {
      this.state = !this.state
    },
    // 分页页数
    handleSizeChange(val) {
      this.data.pageSize = val
      this.housePropertyList()
    },
    // 分页页码
    handleCurrentChange(val) {
      this.data.current = val
      this.housePropertyList()
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
  padding: 40px 40px;
  .app-container{
    padding: 0;
    span{
      font-weight:800;
      font-size: 18px;
      margin-right: 10px;
    }
    p{
      display:inline-block;
    }
  }
  .box-but{
    margin-bottom: 20px;
    span{
      font-weight: 800;
    }
    .but{
      margin-top: 40px;
    }
    .el-date-editor{
      display: block;
      padding: 0 0 0 10px;
    }
     .el-form-item {
      margin-right: 22px;
      width: 250px;

    ::v-deep .el-input__inner{
     height: 35px;
      line-height: 35px;
      width: 250px;
      }
 }
.box .box-but .el-form-item,.but{
      width: 150px;
      margin-right: 0;
    }
    .box .box-but .el-form-item,.unfold{
      width: 50px;
      margin-top: 40px;
       margin-right: 0;
    }
  }
  .box-card{
     margin-bottom: 20px;
    .but-flet{
      float: right;
    }
  }
  .bottomtxt{
    text-align: center;
    p{
      margin: 0;
    }
  }

}
</style>
